<template>
  <layout>
    <transition name="fade" mode="out-in">
      <div v-if="transitionSwitch.fade" class="inner">
        <h1 @click="SET('S_loading',false)">WMS X</h1>
        <p class="version"><span>--</span>乐速科技<span>--</span></p>
        <div class="form">
          <transition name="horizontalRotation">
            <s-form
              v-if="transitionSwitch.horizontalRotation"
              key="main"
              :form="form"
              ref="form">
              <el-form-item prop="userAccount">
                <el-input type="text" v-model="form.userAccount" placeholder="用户名" spellcheck="false" auto-capitalize="off" auto-complete="off" auto-correct="off"></el-input>
              </el-form-item>
              <el-form-item prop="userPassword">
                <el-input type="password" v-model="form.userPassword" placeholder="密码" auto-capitalize="off" auto-complete="off" auto-correct="off"></el-input>
              </el-form-item>
              <button id="login-button" @click.prevent="login" :disabled="!transitionSwitch.fade" tabindex="3">登陆
              </button>
            </s-form>
          </transition>
        </div>
      </div>
    </transition>
  </layout>
</template>

<script>
  import {AutoVue, SpeckText, ReqFormPC} from '~/plugins/Tools';
  import axios from 'axios';
  import layout from '~/layouts/greenBackgroundWhiteBlockDown';
  import {Loading, Message, Notification} from 'element-ui';
  import Config from '~/config';
  const loginFail = new RegExp('^<!DOCTYPE html>');
  let {
    Local,
    PublicURL,
    SSO,
    DelayLoadingCloseTime,
  } = Config;

  let loadinginstace = null;
  let hasHttp = false;
  let delayTime = DelayLoadingCloseTime;
  function loadingClose () {
    hasHttp = false;
    setTimeout(() => {
      if (!hasHttp) {
        if (loadinginstace && loadinginstace !== null) loadinginstace.close();
      }
    }, delayTime * 1000);
  }
  export default AutoVue({
//    layout: 'greenBackgroundWhiteBlockDown',
    components: {
      'layout': layout,
    },
    unAuth: true,
    name: 'login',
    computed: {
      ie6: function () {
        if (!this.pc) return false;
        let PC = this.pc;
        let {chrome} = PC;
        if (!chrome) {
          return true;
        } else {
          let version = chrome.split('.')[0];
          return version < 62;
        }
      },
    },
    data: {
      transitionSwitch: {
        horizontalRotation: false,
        fade: false,
      },
      waiting: false,
      loadingTimer: 0,
      stopTime: 0,
      form: {
        'userAccount': {
          value: '',
          rule: ['vNull', 'vNTS', 'vWS16'],
        },
        'userPassword': {
          value: '',
          rule: ['vNull', 'vWS16'],
        },
      },
      pc: '',
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'init()',
    },
    store: ['S_loading', 'USER_user', 'USER_authUser'],
    async mounted () {
      this.init();
    },
    methods: {
      init () {
        this.transitionSwitch.fade = false;
        this.transitionSwitch.horizontalRotation = false;
        SpeckText('欢迎使用 乐速科技 WMS ten');
        this.pc = ReqFormPC(navigator.userAgent.toLowerCase());
        setTimeout(() => {
          this.transitionSwitch.fade = true;
          setTimeout(() => {
            this.transitionSwitch.horizontalRotation = true;
          }, 200);
        }, 500);
        this.SET('S_loading', false);
        this.loading = false;
        this.transitionSwitch.fade = true;
      },
      login () {
        this.VALIDATE('form', option => {
          option.appCode = Local.appCode;
          option.origin = PublicURL.origin;
          option.ie6 = this.ie6;
          loadinginstace = Loading.service({
            text: '正在登录中...',
            fullscreen: true,
          });
          axios.request({
            method: SSO.loginMethod,
            url: SSO.ssoLogin,
            withCredentials: true,
            data: option,
          }).then(async data => {
            if (this.ie6) {
              Message({
                type: 'warning',
                message: '系统检查您的浏览器内核版本过低，请联系运维人员，获取最佳应用体验。',
              });
              data.data = await this.get(data.data.url);
            } else {
              loadingClose();
            }
            if (typeof data.data !== 'undefined') {
              if (loginFail.test(data.data)) {
                return Notification({
                  type: 'error',
                  title: '用户登录',
                  message: '用户名或者密码错误!',
                });
              }
              this.SET('USER', data.data);
            } else {
              if (loginFail.test(data)) {
                return Notification({
                  type: 'error',
                  title: '用户登录',
                  message: '用户名或者密码错误!',
                });
              }
              this.SET('USER', data);
            }
            this.loading = true;
            this.transitionSwitch.fade = false;
            setTimeout(() => {
              this.$router.push({path: '/' + Local.name});
            }, 1500);
          }).catch(err => {
            if (this.waiting) {
              this.$message(`请等待${Math.floor(this.stopTime / 1000)}秒后重试...`);
            }
            console.error(err);
          });
        });
      },
    },
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    h1 {
      font-size: 40px;
      transition-duration: 1s;
      transition-timing-function: ease-in-put;
      font-weight: 200;
    }
    .version {
      color: #e4e4e4;
      font-size: 1em;
      text-align: center;
      margin-bottom: -10px;
      margin-top: -20px;
      span {
        margin: 0 5px;
      }
    }
  }
</style>

<style lang="scss">
  @import "../../assets/css/transition/horizontalRotation";
  @import "../../assets/css/transition/fade";
  .login .form {
    width: 360px;
    margin: 0 auto;
    padding: 20px 0;
    position: relative;
    z-index: 2;
    min-height: 190px;
    .el-input{
      outline: none;
      input {
        outline: 0;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background-color: rgba(255, 255, 255, 0.2);
        width: 250px;
        border-radius: 3px;
        padding: 15px 15px;
        height: 44px;
        margin: 0 auto 10px;
        display: block;
        text-align: center;
        font-size: 18px;
        color: white;
        transition:all 0.25s;
        font-weight: 300;
      }
      input:hover {
        background-color: rgba(255, 255, 255, 0.4);
      }
      input:focus {
        background-color: white;
        width: 300px;
        color: #53e3a6;
      }
    }
    .is-error {
      .el-input {
        input {
          border: 1px solid rgba(238, 53, 42, 0.4);
        }
        input:focus {
          border: 1px solid rgba(238, 53, 42, 0.4);
        }
      }
      .el-form-item__error{
        color: #ff4949;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 44px;
        left: 0;
        right: 0;
      }
    }

    .el-form-item {
      margin-bottom: 0;
    }

    button {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: 0;
      background-color: white;
      border: 0;
      padding: 8px 15px;
      color: #53e3a6;
      border-radius: 3px;
      width: 250px;
      cursor: pointer;
      font-size: 18px;
      -webkit-transition-duration: 0.25s;
      transition-duration: 0.25s;
    }
    button:hover {
      background-color: #f5f7f9;
    }
  }
</style>
